<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Responsive Admin Dashboard Template">
		<meta name="keywords" content="admin,dashboard">
		<meta name="author" content="skcats">
		<!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<!-- Title -->
		<title>商品信息</title>

		<!-- Styles -->
		<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link href="assets/plugins/icomoon/style.css" rel="stylesheet">
		<link href="assets/plugins/uniform/css/default.css" rel="stylesheet" />
		<link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />
		<link href="css/bootstrap-table.min.css" rel="stylesheet" />

		<!-- Theme Styles -->
		<link href="assets/css/ecaps.min.css" rel="stylesheet">
		<link href="assets/css/custom.css" rel="stylesheet">
	</head>
	<body>
		<!-- Page Inner -->
		<div class="page-inner" style="">
			<!-- 
			<div class="alert alert-default" role="alert">
			    Simple, clean and engaging charts for designers and developers.
			</div> -->
			<div id="main-wrapper">
				<div class="row">
					<div class="col-md-12">
						<div class="panel panel-white">
							<div class="panel-heading">
								<h3>订单管理</h3>
							</div>
							<div class="panel-body">
								<form class="form-inline col-md-offset-7" role="form" id="eventqueryform">
									<div class="form-group">
										<label class="sr-only" for="name">商品名称：</label> <input type="text" class="form-control" data-toggle="tooltip"
										 title="请输入商品名称" id="query-name" name="query-name" placeholder="请输入商品名称" />
									</div>
									<button type="submit" class="btn btn-default" id="eventquery">
										<i class="fa fa-check"></i>提交
									</button>
									<button type="reset" class="btn btn-default">
										<i class="fa fa-trash"></i>清空
									</button>
									<button type="button" class="btn btn-default" onclick="refresh();return false;">
										<i class="fa fa-refresh"></i>
									</button>
								</form>
								<div class="tabs-left" role="tabpanel">
									<!-- Nav tabs -->
									<ul class="nav nav-tabs" role="tablist">
										<li role="presentation" class="active"><a href="#tab9" role="tab" data-toggle="tab">待支付</a></li>
										<li role="presentation"><a href="#tab10" role="tab" data-toggle="tab">待发货</a></li>
										<li role="presentation"><a href="#tab11" role="tab" data-toggle="tab">已发货</a></li>
										<li role="presentation"><a href="#tab12" role="tab" data-toggle="tab">已完成</a></li>
										<li role="presentation"><a href="#tab13" role="tab" data-toggle="tab">已取消</a></li>
									</ul>
									<!-- Tab panes -->
									<div class="tab-content">
										<div role="tabpanel" class="tab-pane active fade in" id="tab9">
											<div class="table-responsive">
												<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
													<thead>
														<tr>
															<th></th>
															<th>商品标题</th>
															<th>价格</th>
															<th>数量</th>
															<th>sku</th>
															<th>订单编号</th>
															<th>订单创建时间</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab10">
											<div class="table-responsive">
												<table id="example1" class="display table" style="width: 100%; cellspacing: 0;">
													<thead>
														<tr>
															<th></th>
															<th>商品标题</th>
															<th>价格</th>
															<th>数量</th>
															<th>sku</th>
															<th>订单编号</th>
															<th>订单创建时间</th>
															<th>管理</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab11">
											<div class="table-responsive">
												<table id="example2" class="display table" style="width: 100%; cellspacing: 0;">
													<thead>
														<tr>
															<th></th>
															<th>商品标题</th>
															<th>价格</th>
															<th>数量</th>
															<th>sku</th>
															<th>订单编号</th>
															<th>订单创建时间</th>
															<th>物流跟踪号</th>
															<th>管理</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab12">
											<div class="table-responsive">
												<table id="example3" class="display table" style="width: 100%; cellspacing: 0;">
													<thead>
														<tr>
															<th></th>
															<th>商品标题</th>
															<th>价格</th>
															<th>数量</th>
															<th>sku</th>
															<th>订单编号</th>
															<th>订单创建时间</th>
															<th>物流跟踪号</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
										<div role="tabpanel" class="tab-pane fade" id="tab13">
											<div class="table-responsive">
												<table id="example4" class="display table" style="width: 100%; cellspacing: 0;">
													<thead>
														<tr>
															<th></th>
															<th>商品标题</th>
															<th>价格</th>
															<th>数量</th>
															<th>sku</th>
															<th>订单编号</th>
															<th>订单创建时间</th>
														</tr>
													</thead>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div><!-- Main Wrapper -->
			<div class="page-footer">

			</div>
		</div><!-- /Page Inner -->
		<script src="assets/plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
		<script src="assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<script src="js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/plugins/switchery/switchery.min.js"></script>
		<script src="assets/js/ecaps.min.js"></script>
		<script type="text/javascript">
			var row = [{
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}];
			var row1 = [{
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20"
			}, ];
			var row2 = [{
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46990390"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "465782131290"
			}, ];
			var row3 = [{
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46990390"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "465782131290"
			}, ];
			var row4 = [{
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46578990890"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "46990390"
			}, {
				"title": "product",
				"price": "$50",
				"num": 6,
				"sku": "GM100320",
				"order-num": "75684894",
				"order-time": "2019-07-24 19:00:20",
				"tracking-number": "465782131290"
			}, ];
			$(function() {
				var options = {
					method: 'post',
					data: row,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'order-num',
						align: 'center',
					}, {
						field: 'order-time',
						align: 'center',
					}]
				};
				var options1 = {
					method: 'post',
					data: row1,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'order-num',
						align: 'center',
					}, {
						field: 'order-time',
						align: 'center',
					}, {
						field: 'op',
						align: 'center',
						valign: 'center',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							var html = [
								"<button type='button' class='btn btn-info btn-xs' onclick='#'><i class='fa fa-pencil'></i>发货</button>",
							];
							return html.join('');
						}
					}]
				};
				var options2 = {
					method: 'post',
					data: row2,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'order-num',
						align: 'center',
					}, {
						field: 'order-time',
						align: 'center',
					}, {
						field: 'tracking-number',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-primary">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'op',
						align: 'center',
						valign: 'center',
						events: window.operateEvents,
						formatter: function(value, row, index) {
							var html = [
								"<button type='button' class='btn btn-warning btn-xs' onclick='#'><i class='fa fa-pencil'></i>取消</button>",
							];
							return html.join('');
						}
					}]
				};
				var options3 = {
					method: 'post',
					data: row3,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'order-num',
						align: 'center',
					}, {
						field: 'order-time',
						align: 'center',
					}, {
						field: 'tracking-number',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-primary">' + value + '</a>'
							];
							return html.join('');
						}
					}]
				};
				var options4 = {
					method: 'post',
					data: row4,
					//	url:"../BookServlet",
					cache: false,
					contentType: 'application/x-www-form-urlencoded',
					striped: true,
					dataType: "json",
					pagination: true,
					showPaginationSwitch: false,
					pageSize: 4,
					pageNumber: 1,
					sortable: true,
					sortOrder: "asc",
					pageList: [2, 5, 10],
					search: false,
					sidePagination: 'client',
					silent: true,
					toolbarAlign: 'right',
					columns: [{
						field: null,
						checkbox: true,
					}, {
						field: 'title',
						align: 'center',
						formatter: function(value, row, index) {
							var html = [
								'<a href="#" class="text-info">' + value + '</a>'
							];
							return html.join('');
						}
					}, {
						field: 'price',
						align: 'center',
					}, {
						field: 'num',
						align: 'center',
					}, {
						field: 'sku',
						align: 'center',
					}, {
						field: 'order-num',
						align: 'center',
					}, {
						field: 'order-time',
						align: 'center',
					}]
				};
				$('#example').bootstrapTable(options);
				$('#example1').bootstrapTable(options1);
				$('#example2').bootstrapTable(options2);
				$('#example3').bootstrapTable(options3);
				$('#example4').bootstrapTable(options4);
			});

			function refresh() {
				$('#example').bootstrapTable('refresh');
				$('#example1').bootstrapTable('refresh');
				$('#example2').bootstrapTable('refresh');
				$('#example3').bootstrapTable('refresh');
				$('#example4').bootstrapTable('refresh');
				console.log('refresh');
			}
		</script>
	</body>
</html>
